<template>
	<div class="main">
		<vue-particles color="#76aed3" :particleOpacity="0.7" :particlesNumber="50" shapeType="triangle"
			:particleSize="3.5" linesColor="#a0d7f9" :linesWidth="1.5" :lineLinked="true" :lineOpacity="0.7"
			:linesDistance="100" :moveSpeed="3" :hoverEffect="false" hoverMode="grab" :clickEffect="false"
			clickMode="push" class="lizi">
		</vue-particles>
		<span class="title">LULU 乐享</span>
		<el-form :rules="rules" v-loading="loading" element-loading-text="努力登录中..."
			element-loading-spinne="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)" ref="user"
			:model="user" class="loginbox">
			<el-form-item prop="studentid">
				<el-input type="text" v-model="user.studentid" placeholder="请输入学号">
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" auto-complete="false" v-model="user.password" placeholder="请输入密码">
				</el-input>
			</el-form-item>
			<div style="display: flex;justify-content: space-around;">
				<el-button type="primary" style="width:40%;margin-top:15px" @click="toRegist" round>注册</el-button>
				<el-button type="primary" style="width:40%;margin-top:15px" @click="doSubmit" round>登录</el-button>
			</div>

		</el-form>

		<div class="verify" v-if="toverify">
			<slide-verify ref="slideblock" @again="onAgain" @success="onSuccess" @fail="onFail" :accuracy="accuracy"
			:imgs="imglist"	:slider-text="text"></slide-verify>
		</div>
	</div>
</template>

<script>
import {
	login
} from '../api/api.js'
export default {
	name: "Login",
	data() {
		// const checkpwd = (rule, value, cb) => {
		// 	if (value.length > 5) {
		// 		var modes = 0;
		// 		//正则表达式验证符合要求的
		// 		if (/\d/.test(value)) modes++; //数字
		// 		if (/[A-z]/.test(value)) modes++; //小写
		// 		if (/\W/.test(value)) modes++; //特殊字符					
		// 		if (modes == 1) {
		// 			cb(new Error('密码强度过低,请包含大小写字母、数字、特殊字符中两种及以上'))
		// 		}
		// 		return cb();
		// 	} else {
		// 		cb(new Error('请确保密码长度在6位以上'))
		// 	}
		// }


		return {
			user: {
				studentid: '',
				password: '',
			},
			checked: true,
			text: '向右滑',
			accuracy: 4,
			toverify: false,
			succeed: false,
			loading: false,
			imglist: ['https://img.googookuki.cn/86ddd119-df48-4f92-9039-dbba86f9b8d5.png',
				'https://img.googookuki.cn/454fada4-64c7-4484-9498-7664882a635d.jpg',
				'https://img.googookuki.cn/21cefd67-e267-40ba-b9d9-55a39ea0266f.jpg',
				'https://img.googookuki.cn/1704bfef-456e-421a-9519-fb6dde8b913b.jpg'
			],
			rules: {
				studentid: [{
					required: true,
					message: '请输入学号',
					trigger: 'blur'
				},
				{ min: 8, max: 15, message: "学号长度在8到15个字符之间", trigger: "change" }],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				},
				// {
				// 	validator: checkpwd,
				// 	trigger: ['blur', 'change'],
				// }
				]
			}
		}

	},

	methods: {
		onSuccess: function () {
			this.$message({
				type: 'success',
				message: '验证通过',
			});
			this.succeed = true;
			this.toverify = false;
		},
		onFail: function () {
			this.$message.error('验证失败');
		},
		onAgain: function () {
			this.$message({
				message: '请求错误，请重试',
				type: 'warning'
			});
			// 刷新
			this.$refs.slideblock.reset();
		},
		doSubmit: function () {
			this.$refs.user.validate((valid) => {
				if (valid) {
					if (this.succeed) {
						this.loading = true;
						let tmp = {
							...this.user,
							password: this.$md5(this.user.password)
						}
						login(tmp).then(resp => {
							if (resp.data.code == 200) {
								this.setCookieValue("Authorization", resp.data.token);
								this.$message({
									message: '登录成功',
									type: 'success'
								});
								this.loading = false;
								this.$router.push('/home')
							} else {
								this.$message({
									message: resp.data.message,
									type: 'error'
								});
								this.loading = false;
							}

						})
					} else {
						this.$message.warning('请先通过验证');
						this.toverify = true;
					}

				} else {
					this.$message.error('输入格式错误，请检查！')
				}
			})
		},
		toRegist() {
			this.$message({
				type: 'success',
				message: '跳转成功'

			})
			this.$router.push('/regist');
		}
	}
}
</script>

<style scoped="scoped">
html {
	margin: 0;
	padding: 0;
}

.main {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	min-height: 100%;
	min-width: 100%;
	max-height: 1550px auto;
	max-width: 750px auto;
	background-color: #FFFFFF;
	z-index: -100;
}

.loginbox {
	border-radius: 15px;
	background-clip: padding-box;
	margin: 20px auto;
	width: 320px;
	height: 200px;
	padding: 50px;
	background-color: #ffffff;
	opacity: 0.9;
	box-shadow: 0 15px 25px rgba(212, 212, 212, 0.8);
}

.el-input {
	margin-bottom: 15px;
}

.title {
	display: inline-block;
	width: 100%;
	height: 40px;
	font-size: 30px;
	text-align: center;
	color: #535353;
	margin-bottom: 20px;
	margin-top: 180px;
}

.verify {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(10%, -50%);
	padding: 30px 10px 10px 20px;
	background-color: #ffffff;
	border-radius: 5px;
	box-shadow: 0 15px 25px rgba(212, 212, 212, 0.8);
	z-index: 100;
}

.el-form-item__content {
	display: flex;
	align-items: center;
}

.lizi {
	position: fixed;
	width: 100% !important;
	height: 100% !important;
	z-index: -1;
}
</style>
